<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width initial-scale=1">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script src="http://cdn.datatables.net/plug-ins/a5734b29083/integration/jqueryui/dataTables.jqueryui.js"></script>
<script src="bootstrap-datepicker.js"></script>
<script src="bootstrap-confirmation.js"></script>
<script src="bootstrap-tooltip.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"></link>
<link rel="stylesheet" href="http:////cdn.datatables.net/plug-ins/a5734b29083/integration/jqueryui/dataTables.jqueryui.css"></link>
<link rel="stylesheet" href="datepicker.css"></link>
<link rel="stylesheet" href="bootstrap-justified-nav.css"></link>
</head>
<body>
<script>
	$(document).ready(function() {
		 $('table').dataTable( {
		    "paging":   true,
		    "ordering": true,
	        "info":     true,
	        "filter":true,
	        "scrollX": true,
	        "lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]]
		
		  } ); 
	});
</script>	
  <div class="container">
    <div class="panel panel-default">
			<div class="panel-heading">
				  <div>
				  <div>
					 <p class="navbar-text navbar-right"><i class="glyphicon glyphicon-user text-muted"></i>
 					 <a href="#" class="navbar-link">Mark Otto</a> <i class="glyphicon glyphicon-log-out text-muted"></i> <a href="#" class="navbar-link">Logout</a> </p>
					 </div>
				    <div>
					<ul class=" nav nav-justified">
					<li class="active"><a  ><i class="glyphicon glyphicon-home text-muted"></i> Home</a></li>
					  <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Services</a>
					     <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
							<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
							<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
							<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
							<li role="presentation" class="divider"></li>
							<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
						 </ul>
					  </li>
					  <li><a href="#">Services</a></li>
					  <li><a href="#">Downloads</a></li>
					  <li><a href="#">About</a></li>
					  <li><a href="#">Contact</a></li>
					  </div>
				  </div>
			</div>	
			<div class="panel-content">
			  <table id="example" class="display"
								cellspacing="0" width="100%">
								<thead>
									<tr>
										<th>Name</th>
										<th>Position</th>
										<th>Office</th>
										<th>Age</th>
										<th>Start date</th>
										<th>Salary</th>
									</tr>
								</thead>

								<tfoot>
									<tr>
										<th>Name</th>
										<th>Position</th>
										<th>Office</th>
										<th>Age</th>
										<th>Start date</th>
										<th>Salary</th>
									</tr>
								</tfoot>

								<tbody>
									<tr>
										<td>Tiger Nixon</td>
										<td>System Architect</td>
										<td>Edinburgh</td>
										<td>61</td>
										<td>2011/04/25</td>
										<td>$320,800</td>
									</tr>
									<tr>
										<td>Garrett Winters</td>
										<td>Accountant</td>
										<td>Tokyo</td>
										<td>63</td>
										<td>2011/07/25</td>
										<td>$170,750</td>
									</tr>
									<tr>
										<td>Ashton Cox</td>
										<td>Junior Technical Author</td>
										<td>San Francisco</td>
										<td>66</td>
										<td>2009/01/12</td>
										<td>$86,000</td>
									</tr>
									<tr>
										<td>Ashton</td>
										<td>Junior Technical Author</td>
										<td>San Francisco</td>
										<td>66</td>
										<td>2009/01/12</td>
										<td>$86,000</td>
									</tr>
								</tbody>	
						</table>		
			</div>
			<ul class="nav nav-tabs" role="tablist" style="width:100%;">
			<li class="active"><a href="#" onclick="navigateMenu('0','/include/content/welcome.jspx');"><p class="glyphicon glyphicon-home text-primary"><ice:outputText value=" Home" /></p></a></li>
			<li class="active"><a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);">
			<p class="glyphicon glyphicon-user text-primary">&amp;nbsp;<ice:outputText value="#{menu.name}" /></p><span class="caret"></span>
			</a>
	</div>		
  </div>			
</body>

</html>
